<template>
  <div>
    <introduce>
      <span class="title-bold" slot="title"> 设备列表</span>
      <span slot="info"> - 检测所有设备的状态。</span>
    </introduce>
    <div class="gailan">
      <div class="gailan-l">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>设备概览</span>
            <i class="iconfont icon-askoutline"></i>
            <el-button style="float: right; padding: 3px 0" type="text"
              >绑定设备</el-button
            >
          </div>
          <div class="con">
            <div class="shebei"></div>
            <div class="line"></div>
            <div class="wan">
              <div class="num">{{ deviceObj.LoRaWAN.total }}</div>
              <div class="txt">
                <div>LoRaWAN</div>
                <div>网关</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="pp">
              <div class="num">{{ deviceObj.LoRaPP.total }}</div>
              <div class="txt">
                <div>LoRaPP</div>
                <div>网关</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="qunzu">
              <div class="num">{{ deviceObj.group }}</div>
              <div class="txt">群组</div>
            </div>
            <div class="line-big"></div>
            <div class="sensor">
              <div class="img">
                <i class="iconfont icon-yalichuanganqi"></i>
              </div>
              <div class="info">
                <div class="num">{{ deviceObj.sensor.total }}</div>
                <div class="txt">传感器结点</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="jiankong">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>监控</span>
            <i class="iconfont icon-askoutline"></i>
          </div>
          <div class="list">
            <span>网关离线</span>
            <el-tag type="success">{{
              deviceObj.LoRaWAN.offline + deviceObj.LoRaPP.offline
            }}</el-tag>
          </div>
          <div class="list">
            <span>节点离线</span>
            <el-tag type="success">{{ deviceObj.sensor.offline }}</el-tag>
          </div>
          <div class="list">
            <span>传感器低电量</span>
            <el-tag type="danger">{{ deviceObj.sensor.lowBattery }}</el-tag>
          </div>
        </el-card>
      </div>
    </div>
    <template v-for="(item, i) in sensorList">
      <el-card class="box-card sensorlist" v-if="item.length !== 0" :key="i">
        <div slot="header" class="clearfix">
          <span>{{ i }}</span>
        </div>
        <div class="items">
          <el-card
            class="item"
            v-for="(val, index) in sensorList[i]"
            :key="index"
          >
            <div class="img" :style="{ color: val.online ? 'green' : 'gray' }">
              <i class="iconfont icon-yalichuanganqi"></i>
            </div>
            <i
              class="iconfont icon-dianchidianliang lowpower"
              style="font-size: 25px; color: red"
              v-if="val.online && val.powerNum < 25"
            ></i>
            <div class="value">{{ val.devValue }}</div>
            <div class="props">{{ val.devName }}</div>
            <div class="eui">EUI:{{ val.eui }}</div>
          </el-card>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
import Introduce from "@/components/Introduce.vue";
import { $deviceCount } from "@/api/index.js";
import { $sensorList } from "@/api/index.js";
export default {
  name: "dataView",
  components: {
    Introduce,
  },
  data() {
    return {
      deviceObj: {
        LoRaPP: "",
        LoRaWAN: "",
        sensor: "",
      },
      sensorList: [],
    };
  },
  mounted() {
    $deviceCount().then((res) => {
      this.deviceObj = res.data.data;
    });
    $sensorList().then((res) => {
      this.sensorList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.gailan {
  display: flex;
  margin: 10px 0px;
  height: 220px;
  .clearfix i {
    color: gray;
    margin-left: 2px;
  }
  .clearfix span {
    font-weight: 700;
  }
  .gailan-l {
    width: 80%;
    .el-card {
      height: 220px;
      .con {
        height: 120px;
        display: flex;
      }
    }
    .box-card {
      .shebei {
        width: 15%;
        height: 120px;
        background: url("@/assets/gateway.png") no-repeat;
        background-size: contain;
      }
      .line {
        width: 2px;
        height: 60px;
        background: #cdd6e1;
        margin: 22px 20px;
      }
      .line-big {
        width: 2px;
        height: 120px;
        background: #cdd6e1;
        margin: 3px 20px;
      }
      .wan,
      .pp,
      .qunzu {
        width: 15%;
        height: 120px;
        text-align: center;
        font-weight: 700;
        margin-top: 10px;
      }
      .sensor {
        width: 40%;
        height: 120px;
        display: flex;
        .img {
          width: 50%;
          height: 100%;
          transform: rotate(180deg);
          text-align: center;
          line-height: 120px;
          color: gray;
        }
        .info {
          margin-top: 30px;
          width: 50%;
          height: 100%;
          .txt {
            text-align: center;
            font-weight: 700;
          }
        }
        i {
          font-size: 50px;
        }
      }
      .qunzu .txt {
        margin-top: 20px;
      }
      .num {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
      }
    }
  }
  .jiankong {
    margin-left: 10px;
    width: 20%;
    .el-card {
      height: 220px;
    }
    .list {
      height: 32px;
      font-weight: 700;
      .el-tag {
        text-align: center;
        font-weight: 700;
        width: 40px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        float: right;
      }
    }
  }
}
.sensorlist {
  .items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      margin: 5px;
      width: 225px;
      height: 175px;
      text-align: center;
      position: relative;
      .img {
        width: 100%;
        transform: rotate(180deg);
        text-align: center;
        line-height: 120px;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 80px;
        }
      }
      .lowpower {
        position: absolute;
        right: 78px;
        top: 60px;
      }
      .value {
        height: 30px;
        font-size: 30px;
        line-height: 28px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 3px;
      }
      .eui {
        width: 100%;
        background: #f3f4f5;
      }
    }
  }
}
</style>
